<template>
  <div
    id="nav"
    :class="this.$route.path == '/' ? 'home-nav-bg' : 'normal-nav-bg'"
  >
    <el-row>
      <el-col class="main-logo" :sm="{ span: 24 }" :md="{ offset: 6, span: 6 }">
        <app-box-logo style="width:60px;height:60px;"></app-box-logo>
        <span> {{ appName }} </span>
      </el-col>
      <el-col class="account-panel" :sm="{ span: 24 }" :md="{ span: 6 }">
        <router-link to="/" v-if="$route.name === 'Home'">主页</router-link>
        <a v-else href="#" @click="$router.push('/')">主页</a>
        <template v-if="isLogin">
          <router-link to="/my_apps">我的APP</router-link>
        </template>
        <template v-else>
          <router-link to="/login">登陆</router-link>
        </template>
        <router-link to="/about">关于</router-link>
      </el-col>
    </el-row>
  </div>
  <transition name="flow">
    <router-view v-slot="{ Component }" v-if="this.$route.meta.full">
      <transition name="flow">
        <component :is="Component" />
      </transition>
    </router-view>
    <el-row v-else>
      <el-col
        :xs="{ span: 22, offset: 1 }"
        :sm="{ span: 22, offset: 1 }"
        :md="{ span: 22, offset: 1 }"
        :lg="{ span: 18, offset: 3 }"
        :xl="{ span: 12, offset: 6 }"
      >
        <router-view v-slot="{ Component }">
          <transition name="flow">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-col>
    </el-row>
  </transition>

  <el-row class="footer" v-if="!this.$route.meta.noFooter">
    <el-col
      :xs="{ span: 22, offset: 1 }"
      :sm="{ span: 22, offset: 1 }"
      :md="{ span: 22, offset: 1 }"
      :lg="{ span: 18, offset: 3 }"
      :xl="{ span: 12, offset: 6 }"
    >
    </el-col>
  </el-row>
</template>
<script>
import AppBoxLogo from '@/components/AppBoxLogo.vue'
export default {
  data () {
    return {}
  },
  components: {
    AppBoxLogo
  },
  computed: {
    isLogin () {
      return this.$store.state.token != null
    },
    appName () {
      return 'App Box'
    }
  }
}
</script>

<style lang="scss">
  #nav {
    padding: 30px;
    height: 100px;
    box-shadow: var(--shadow);
    a {
      padding: 3px 8px;
      margin-left: 20px;
      border-radius: 5px;
      font-weight: bold;
      color: white;
      text-decoration: none;
      transition: background-color 0.3s, color 0.3s, transform 0.3s;
      &.router-link-active {
        background-color: white;
        color: var(--MainColor);
        text-decoration: solid;
      }
      &:hover {
        transform: translateY(-3px);
      }
    }

    .main-logo {
      font: 40px bold;
      color: white;
      height: 100%;
      display: flex;
      gap: 10px;
    }

    .account-panel {
      color: white;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .footer {
    height: 200px;
  }
  .normal-nav-bg {
    background: radial-gradient(
      circle at 20% 30%,
      var(--MainColor) 5%,
      rgb(55, 113, 172)
    );
  }
  .home-nav-bg {
    background: rgb(55, 113, 172);
  }
</style>
